<template>
	<!-- 活动预约 -->
	<view class="container">
		<!-- 头部导航 -->
		<page-navbar title="活动预约" backgroundColor="#56ab2f00"></page-navbar>

		<!-- 主要内容区域 -->
		<scroll-view class="content" scroll-y="true" :show-scrollbar="false">
			<!-- 活动信息卡片 -->
			<view class="activity-card">
				<image class="activity-image" :src="common.defaultImg(activityInfo.coverId)" mode="aspectFill"></image>
				<view class="activity-info">
					<view class="activity-title">{{ activityInfo.title }}</view>
					<view class="activity-desc">
						<view class="activity-tags" v-for="(tag, ind) in activityInfo.tags" :key="ind">
							{{ tag.tag }}
						</view>
					</view>
					<view class="activity-status">活动持续时间：{{ activityInfo.startTime + ' - ' + activityInfo.endTime }}
					</view>
				</view>
			</view>

			<!-- 日期选择 -->
			<view class="section">
				<view class="section-title">
					<svg-icon name="calendar" size="32" class="title-icon" />
					<text class="title-text">日期选择</text>
				</view>
				<view class="date-selector">
					<view class="date-item" v-for="(date, index) in dateList" :key="index"
						:class="['date-option', { active: selectedDate === index }]" @click="selectDate(index)">
						<view class="date-text">{{ date.label }}</view>
						<view class="date-range">{{ date.range }}</view>
					</view>
					<!-- 日期选择器 -->
					<picker mode="date" :value="pickerDate" :start="todayDate" :end="endDate" @change="onDateChange"
						class="date-picker-wrapper">
						<view class="more-dates">
							<svg-icon name="calendar" size="32" class="date-picker-icon" />
							<text>指定日期</text>
						</view>
					</picker>
				</view>
			</view>

			<!-- 预约时间 -->
			<view class="section">
				<view class="section-title">
					<svg-icon name="clock" size="32" />
					<text class="title-text">预约时间</text>
				</view>
				<view class="time-grid">
					<view class="time-slot" v-for="(time, index) in timeSlots" :key="index"
						:class="['time-option', { active: selectedTime === index, disabled: time.disabled }]"
						@click="selectTime(index)">
						{{ time.label }}
					</view>
				</view>
			</view>

			<!-- 游客信息 -->
			<view class="section">
				<view class="section-header">
					<view class="section-title">
						<svg-icon name="group" size="32" />
						<text class="title-text">游客信息</text>
					</view>
					<view class="add-guest" @click="goToSelectVisitors">
						<text class="add-icon">+</text>
						<text class="add-text">添加游客</text>
					</view>
				</view>

				<!-- 已选择的游客列表 -->
				<view class="selected-guests" v-if="selectedVisitors.length > 0">
					<view class="guest-item" v-for="(guest, index) in selectedVisitors" :key="guest.id || index">
						<view class="guest-info">
							<view class="guest-name">{{ guest.name }}</view>
							<view class="guest-details">
								<text class="detail-text">{{ guest.idCard }}</text>
								<text class="detail-text">{{ guest.phone }}</text>
							</view>
						</view>
						<view class="guest-actions">
							<view class="remove-guest" @click="removeGuest(index)">
								<text class="remove-icon">×</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态提示 -->
				<view class="empty-guests" v-else>
					<svg-icon name="user" size="48" />
					<text class="empty-text">暂未选择游客</text>
					<text class="empty-tip">点击上方"添加游客"选择成员</text>
				</view>
			</view>

			<!-- 预约数量 -->
			<view class="section">
				<view class="section-title">
					<svg-icon name="numbers" size="32" />
					<text class="title-text">预约数量</text>
				</view>
				<view class="quantity-display">
					<text class="quantity-label">共 {{ selectedVisitors.length }} 人预约</text>
					<text class="quantity-tip">数量由选择的游客数量决定</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部预约按钮 -->
		<view class="bottom-action">
			<button class="confirm-btn" @click="confirmReservation">
				确认预约
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue';
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useSelectStore from '@/stores/select.js';
import dayjs from 'dayjs';
import api from "@/api"
import common from '@/utils/common.js'

const imgUrl = uni.imgUrl

// 状态管理
const selectStore = useSelectStore();
const { selectedVisitors } = storeToRefs(selectStore);

// 活动信息
const activityInfo = ref({});

// 日期相关
const todayDate = ref(dayjs().format('YYYY-MM-DD'));
// 结束日期，60天后
const endDate = dayjs().add(60, 'day').format('YYYY-MM-DD');
const pickerDate = ref(dayjs().format('YYYY-MM-DD'));

// 初始化日期列表
const initDateList = () => {
	return [
		{
			label: '今天',
			range: dayjs().format('M-D'),
			date: dayjs().format('YYYY-MM-DD')
		},
		{
			label: '明天',
			range: dayjs().add(1, 'day').format('M-D'),
			date: dayjs().add(1, 'day').format('YYYY-MM-DD')
		},
		{
			label: '后天',
			range: dayjs().add(2, 'day').format('M-D'),
			date: dayjs().add(2, 'day').format('YYYY-MM-DD')
		}
	];
};

// 日期列表
const dateList = ref(initDateList());

// 时间段列表
const timeSlots = ref([
	{ label: '08:00-10:00', disabled: false },
	{ label: '10:00-12:00', disabled: false },
	{ label: '13:00-15:00', disabled: false },
	{ label: '16:00-17:00', disabled: false },
	{ label: '18:00-19:00', disabled: false },
	{ label: '20:00-21:00', disabled: false }
]);

// 游客数量计算（基于选中的游客数量）
const guestCount = computed(() => selectedVisitors.value.length);

// 选中状态
const selectedDate = ref(0);
const selectedTime = ref(-1);
const showBackToTop = ref(false);
const activity_id = ref(null);

onLoad((options) => {
	if (options.id) {
		activity_id.value = options.id;
		getData();
	}
});

onMounted(() => { });

const getData = () => {
	api.attractionsApi.detailInfo({ id: activity_id.value }).then(res => {
		console.log('加载活动数据', res);
		activityInfo.value = res
	})
};

// 选择日期
const selectDate = (index) => {
	selectedDate.value = index;
	console.log('选择日期:', dateList.value[index]);
};

// 日期选择器变化事件
const onDateChange = (e) => {
	const selectedDateValue = e.detail.value;
	pickerDate.value = selectedDateValue;

	// 格式化显示日期
	const formatDate = dayjs(selectedDateValue).format('M-D');
	const dateLabel = getDateLabel(selectedDateValue);

	// 检查是否已存在该日期
	const existingIndex = dateList.value.findIndex(item => item.date === selectedDateValue);

	if (existingIndex === -1) {
		// 添加新的日期选项
		dateList.value.push({
			label: dateLabel,
			range: formatDate,
			date: selectedDateValue
		});
		selectedDate.value = dateList.value.length - 1;
	} else {
		selectedDate.value = existingIndex;
	}
};

// 获取日期标签
const getDateLabel = (dateStr) => {
	const today = dayjs();
	const targetDate = dayjs(dateStr);

	if (targetDate.isSame(today, 'day')) {
		return '今天';
	} else if (targetDate.isSame(today.add(1, 'day'), 'day')) {
		return '明天';
	} else if (targetDate.isSame(today.add(2, 'day'), 'day')) {
		return '后天';
	} else {
		return '指定日期';
	}
};

// 选择时间
const selectTime = (index) => {
	if (!timeSlots.value[index].disabled) {
		selectedTime.value = index;
		console.log('选择时间:', timeSlots.value[index]);
	}
};

// 跳转到游客选择页面
const goToSelectVisitors = () => {
	uni.navigateTo({
		url: '/pages/details/visitors?type=select'
	});
};

// 移除游客
const removeGuest = (index) => {
	selectedVisitors.value.splice(index, 1);
	console.log('移除游客，当前游客数量:', selectedVisitors.value.length);
};

// 页面显示时刷新游客信息
onShow(() => {
	console.log('页面显示，当前选中游客数量:', selectedVisitors.value.length);
});


// 确认预约
const confirmReservation = () => {
	// 验证表单
	if (selectedTime.value === -1) {
		uni.showToast({
			title: '请选择预约时间',
			icon: 'none'
		});
		return;
	}

	// 验证游客信息
	if (selectedVisitors.value.length === 0) {
		uni.showToast({
			title: '请选择游客',
			icon: 'none'
		});
		return;
	}

	const selectedDateInfo = dateList.value[selectedDate.value];
	const selectedTimeInfo = timeSlots.value[selectedTime.value];

	uni.showModal({
		title: '确认预约',
		content: `确定预约 ${activityInfo.value.title} 吗？\n日期：${selectedDateInfo.label} (${selectedDateInfo.range})\n时间：${selectedTimeInfo.label}\n游客：${selectedVisitors.value.length}人`,
		confirmText: '确认',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				// touristId 游客Id，逗号分隔
				let touristId = selectedVisitors.value.map(item => item.id).join(',');
				api.activistApi.booking({
					touristId,
					infoId: activity_id.value,
					bookingDay: selectedDateInfo.date,
					bookingTime: selectedTimeInfo.label,
				}).then(res => {
					uni.showToast({
						title: '预约成功！',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				})
			}
		}
	});
};

// 页面滚动事件
onPageScroll((e) => {
	showBackToTop.value = e.scrollTop > 300;
});
</script>

<style lang="scss" scoped>
.container {
	background: #fff;
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	padding: 20rpx 30rpx 120rpx;
}

/* 活动信息卡片 */
.activity-card {
	background: rgba(238, 250, 238, 0.6);
	border-radius: 20rpx;
	padding: 25rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(86, 171, 47, 0.15);
	backdrop-filter: blur(10rpx);

	.activity-image {
		width: 120rpx;
		height: 80rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.activity-info {
		flex: 1;

		.activity-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}

		.activity-desc {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;

			.activity-tags {
				background: #56ab2f;
				color: #fff;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
			}
		}

		.activity-status {
			font-size: 22rpx;
			color: #56ab2f;
			font-weight: 500;
		}
	}
}

/* 分区样式 */
.section {
	margin-bottom: 30rpx;

	.section-title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		gap: 16rpx;

		.title-icon {
			font-size: 28rpx;
		}

		.title-text {
			flex: 1;
		}
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.add-guest {
			background: linear-gradient(135deg, #56ab2f, #a8e6cf);
			color: white;
			padding: 8rpx 20rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(86, 171, 47, 0.3);

			.add-icon {
				font-size: 20rpx;
				margin-right: 5rpx;
				font-weight: bold;
			}
		}
	}
}

/* 日期选择器 */
.date-selector {
	display: flex;
	gap: 20rpx;


	.date-option {
		flex: 1;
		background: rgba(229, 230, 229, 0.4);
		border-radius: 15rpx;
		padding: 10rpx;
		text-align: center;
		border: 2rpx solid transparent;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;

		&.active {
			background: rgba(86, 171, 47, 0.1);
			border-color: #56ab2f;
			box-shadow: 0 4rpx 12rpx rgba(86, 171, 47, 0.2);
		}

		.date-text {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 5rpx;
			font-weight: 500;
		}

		.date-range {
			font-size: 22rpx;
			color: #666;
		}
	}

	.date-picker-wrapper {
		flex: 1;
	}

	.more-dates {
		flex: 1;
		background: rgba(229, 230, 229, 0.4);
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #56ab2f;
		font-size: 24rpx;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		height: 100%;
		min-height: 80rpx;

		&:active {
			background: rgba(86, 171, 47, 0.1);
			transform: scale(0.98);
		}

		.date-picker-icon {
			font-size: 28rpx;
			margin-bottom: 5rpx;
		}
	}
}

/* 时间网格 */
.time-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15rpx;

	.time-option {
		background: rgba(229, 230, 229, 0.4);
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333;
		border: 2rpx solid transparent;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;

		&.active {
			background: rgba(86, 171, 47, 0.1);
			border-color: #56ab2f;
			color: #56ab2f;
			box-shadow: 0 4rpx 12rpx rgba(86, 171, 47, 0.2);
		}

		&.disabled {
			background: #F5F5F5;
			color: #999;
		}

		&:not(.disabled):active {
			transform: scale(0.98);
		}
	}
}

/* 已选择的游客列表 */
.selected-guests {
	.guest-item {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		backdrop-filter: blur(8rpx);
		box-shadow: 0 2rpx 12rpx rgba(86, 171, 47, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.guest-info {
			flex: 1;

			.guest-name {
				font-size: 32rpx;
				font-weight: 600;
				color: #56ab2f;
				margin-bottom: 8rpx;
			}

			.guest-details {
				display: flex;
				flex-direction: column;
				gap: 4rpx;

				.detail-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.guest-actions {
			.remove-guest {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.remove-icon {
					color: #fff;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}
}

/* 空状态 */
.empty-guests {
	background: rgba(245, 245, 245, 0.6);
	border-radius: 16rpx;
	padding: 60rpx 20rpx;
	text-align: center;
	backdrop-filter: blur(8rpx);

	.empty-icon {
		font-size: 80rpx;
		display: block;
		margin-bottom: 20rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		display: block;
		margin-bottom: 10rpx;
	}

	.empty-tip {
		font-size: 24rpx;
		color: #bbb;
		display: block;
	}
}

/* 数量显示 */
.quantity-display {
	background: rgba(229, 230, 229, 0.4);
	border-radius: 15rpx;
	padding: 25rpx;
	text-align: center;
	backdrop-filter: blur(10rpx);
	box-shadow: 0 2rpx 10rpx rgba(86, 171, 47, 0.1);

	.quantity-label {
		font-size: 32rpx;
		font-weight: bold;
		color: #56ab2f;
		display: block;
		margin-bottom: 8rpx;
	}

	.quantity-tip {
		font-size: 24rpx;
		color: #999;
		display: block;
	}
}

/* 底部确认按钮 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid rgba(86, 171, 47, 0.2);
	z-index: 100;

	.confirm-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #56ab2f, #a8e6cf);
		border-radius: 40rpx;
		border: none;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(86, 171, 47, 0.4);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(86, 171, 47, 0.6);
		}
	}
}

</style>
